<template>
  <div class="zf-cloud-main">
    <div id="zfCloud1" style="width: 100%;height: 100%" />
  </div>
</template>

<script>
require('echarts-wordcloud')
var echarts = require('echarts')
export default {
  components: {

  },
  data() {
    return {

    }
  },
  computed: {

  },
  created() {

  },
  mounted() {
    this.initZfCloud()
  },
  methods: {
    initZfCloud() {
      // # https://github.com/ecomfe/echarts-wordcloud
      var chart = echarts.init(document.getElementById('zfCloud1'))
      var option = {
        tooltip: {
          show: true
        },
        series: [{
          type: 'wordCloud',
          gridSize: 6,
          shape: 'diamond',
          sizeRange: [16, 30],
          width: '100%',
          height: '100%',
          rotationStep: 25,
          textStyle: {
            normal: {
              color: function() {
                return 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') + ')'
              }
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data: [{
            name: ' 特斯拉Model S',
            value: 30
          },
          {
            name: '天生要强',
            value: 24
          },
          {
            name: ' 华为p20',
            value: 21
          },
          {
            name: '杜兰特',
            value: 19
          },
          {
            name: '三只松鼠',
            value: 18
          },
          {
            name: 'Mac Pro',
            value: 18
          },
          {
            name: 'Iphone12 Pro',
            value: 17
          },
          {
            name: '玛莎拉蒂',
            value: 12
          },
          {
            name: '小米手机',
            value: 12
          },
          {
            name: '保时捷',
            value: 11
          },
          {
            name: ' 特斯拉Model S',
            value: 30
          },
          {
            name: '天生要强',
            value: 24
          },
          {
            name: ' 华为p20',
            value: 21
          },
          {
            name: '杜兰特',
            value: 19
          },
          {
            name: '三只松鼠',
            value: 18
          },
          {
            name: 'Mac Pro',
            value: 18
          },
          {
            name: 'Iphone12 Pro',
            value: 17
          },
          {
            name: '玛莎拉蒂',
            value: 12
          },
          {
            name: '小米手机',
            value: 12
          },
          {
            name: '保时捷',
            value: 11
          }

          ]
        }]

      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
  .zf-cloud-main{
    width: 100%;
    height: 100%;
  }
</style>
